<template>
  <div class="categoryPage">

    <!--  Header  -->
    <Header></Header>

    <div class="sort">
      <div class="sortOpt">
        <el-timeline>
          <el-timeline-item
              v-for="(category, index) in categories"
              :key="index">
          <span :style="selectedCategoryId === category.id ? selectedStyle : ''"
                @click="listArticleByCategoryId(category.id)" class="categoryName">{{ category.name }}</span>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-timeline class="timeLine">
        <el-timeline-item :timestamp="article.createTime" placement="top" v-for="article in articles">
          <el-card>
            <h4 class="title" @click="getDetailArticle(article.id)" style="cursor:pointer; margin-bottom: 20px">
              {{ article.title }}</h4>
            <el-tag @click="selectArticleByTagId(tag.id)" :type="tagTypes[index]"
                    style="margin-right: 10px;cursor:pointer;" v-for="(tag, index) in article.tags">
              {{ tag.name }}
            </el-tag>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>

    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import {listAllCategory} from "@/api/category";
import {getArticleByCategoryId} from "@/api/category";

import Footer from "@/components/Footer";
import Header from "@/components/Header.vue";

export default {
  name: "CategoryView",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      categories: [],
      articles: [],
      tagTypes: ["danger", "success", "warning", "", "danger", "info", "warning", "danger", "", "success", "info", "warning", "danger", "", "success", "info", "warning", "danger", "", "success", "info", "warning", "danger", "", "success", "info", "warning", "danger", ""],
      firstFlag: true,
      selectedStyle: '',
      selectedCategoryId: -1,

      /*Header*/
      keyword: '',
      activeIndex2: '',
      userInfo: {
        avatar: '',
        userName: ''
      },
      isLogin: false,
    }
  },
  created() {
    this.init()
    listAllCategory().then(res => {
      if (this.firstFlag) {
        this.selectedCategoryId = res.data[0].id
        this.listArticleByCategoryId(res.data[0].id)
        this.firstFlag = false
      }
      this.categories = res.data;
    })

    /*Header*/
    this.keyword = ''
    this.init()
    this.showUserInfo();
  },
  methods: {
    init() {
      this.firstFlag = true

      /*Header*/
      this.userInfo = null
      this.isLogin = false
    },
    listArticleByCategoryId(categoryId) {
      this.selectedStyle = 'color: red'
      this.selectedCategoryId = categoryId
      getArticleByCategoryId(categoryId).then(res => {
        console.log(res.data)
        this.articles = res.data
      })
    },
    getDetailArticle(id) {
      // this.$router.push('/article/detail/' + id);
      let routeData = this.$router.resolve({path: '/article/detail/' + id, query: {id: 1}});
      window.open(routeData.href, '_blank');
    },
    selectArticleByTagId(tagId) {
      this.$router.push('/search?tagId=' + tagId)
    },
  }
}
</script>

<style scoped>
.categoryPage {
  position: fixed;
  background-color: #f6d9d9;
  width: 100%;
  height: 100%;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.title:hover {
  color: red;
}

.sort {
  width: 1200px;
//width: 70%; margin: 10px auto;
}

.sort .categoryName:hover {
  color: #f80231;
  cursor: pointer;
}

.sort .categoryName {
  color: #a64343;
  cursor: pointer;
}

.sort .sortOpt {
  width: 200px;
  height: 824px;
  float: left;
  margin-left: 60px;
  margin-right: 20px;
  overflow-y: scroll;
}

.sort .timeLine {
  width: 870px;
  height: 600px;
  float: left;
  overflow-y: scroll;
}


/* 整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #de4131;
  /* 关键代码 */
  background-image: -webkit-linear-gradient(45deg,
  rgba(255, 255, 255, 0.4) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, 0.4) 50%,
  rgba(255, 255, 255, 0.4) 75%,
  transparent 75%,
  transparent);
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f6d9d9;
  border-radius: 32px;
}

</style>
